<!--车辆报警信息-->
<template>
  <div class="warnMessageContainer">
    <div v-if="role_id!=3">
      <van-sticky>
        <!--头部bar开始-->
        <CommonBar :options="options"></CommonBar>
        <!--头部bar结束-->
        <!--选行政区开始-->
        <div class="areacontent">
          <van-row gutter="30">
            <van-col span="12">
              <!--车辆事件-->
              <van-dropdown-menu active-color="#0AD691">
                <van-dropdown-item
                  v-model="cartype"
                  :options="cartypecolumns"
                  @change="onConfirmCar"
                />
              </van-dropdown-menu>
            </van-col>

            <!--车辆i项目公司-->
            <van-col span="12" v-show="department_type==1">
              <van-dropdown-menu active-color="#0AD691">
                <van-dropdown-item
                  v-model="ProjectCompany"
                  :options="ProjectCompanycolumns"
                  @change="onConfirmProjectCompany"
                />
              </van-dropdown-menu>
            </van-col>
            <!--车辆i项目部-->
            <van-col span="12" v-show="department_type==1||department_type==3">
              <van-dropdown-menu active-color="#0AD691">
                <van-dropdown-item
                  v-model="Project"
                  :options="Projectcolumns"
                  @change="onConfirmProject"
                />
              </van-dropdown-menu>
            </van-col>
            <!--车辆id-->
            <van-col span="12">
              <van-dropdown-menu active-color="#0AD691">
                <van-dropdown-item
                  v-model="carname"
                  :options="carnamecolumns"
                  @change="onConfirmCarname"
                />
              </van-dropdown-menu>
            </van-col>
            <!--开始时间-->
            <van-col span="12">
              <p @click="showPickerdate = true" class="dateselect">
                <span>{{signdate}}</span>
                <van-icon name="calender-o" class="arrowDown" />
              </p>
              <van-popup v-model="showPickerdate" position="bottom">
                <van-datetime-picker
                  type="date"
                  @cancel="showPickerdate = false"
                  @confirm="onConfirmdate"
                  v-model="currentDate"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :formatter="formatterDate"
                />
              </van-popup>
            </van-col>
            <!--结束时间-->
            <van-col span="12">
              <p @click="clickenddate" class="dateselect">
                <span>{{enddate}}</span>
                <van-icon name="calender-o" class="arrowDown" />
              </p>
              <van-popup v-model="showPickerenddate" position="bottom">
                <van-datetime-picker
                  type="date"
                  @cancel="showPickerenddate = false"
                  @confirm="onConfirmenddate"
                  v-model="currentDate"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :formatter="formatterDate"
                />
              </van-popup>
            </van-col>
          </van-row>
        </div>
        <div class="divheight"></div>
        <!--选行政区结束-->

        <div class="contebt">
          <ul class="contebt_ul">
            <li class="contebt_li countScoreHeader">
              <span class="span1">时间</span>
              <span class="span2">项目部</span>
              <span class="span3">对象</span>
              <span class="span4">事件</span>
              <span class="span5">事件信息</span>
            </li>
          </ul>
        </div>
      </van-sticky>
      <!--表格开始-->
      <div class="contebt conetnt">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="20"
          v-if="messageList.length>0"
        >
          <ul class="contebt_ul">
            <!-- <li class="contebt_li countScoreHeader">
            <span class="span1">时间</span>
            <span class="span2">项目部</span>
            <span class="span3">对象</span>
            <span class="span4">事件</span>
            <span class="span5">事件信息</span>
            </li>-->

            <li class="contebt_li" v-for="(item, index) in messageList" :key="index">
              <span class="span1">{{item.create_date}}</span>
              <span class="span2">{{item.project_name}}</span>
              <span class="span3">{{item.plate_number}}</span>
              <span class="span4 color1" v-if="item.type==1">位置报警</span>
              <span class="span4 color2" v-if="item.type==2">上下线报警</span>
              <span class="span4 color3" v-if="item.type==3">超速报警</span>
              <span class="span4 color4" v-if="item.type==4">偏离路线</span>
              <span class="span5" v-if="item.type==1">在{{item.formatted_address}}位置报警</span>
              <span class="span5" v-if="item.type==2">在{{item.formatted_address}}上下线</span>
              <span class="span5" v-if="item.type==3">在{{item.formatted_address}}超速{{item.ext}}KM</span>
              <span class="span5" v-if="item.type==4">在{{item.formatted_address}}偏离路线</span>
            </li>
          </ul>
        </van-list>
        <div class="noData" v-else>
          <van-image width="163px" height="120px" fit="contain" :src="nochekData" />
          <p>暂无数据 ！</p>
        </div>
      </div>

      <!--表格结束-->
    </div>
    <!--暂无权限查看-->
    <div v-else>
      <van-sticky>
        <!--头部bar开始-->
        <CommonBar :options="options"></CommonBar>
        <!--头部bar结束-->
      </van-sticky>
      <van-image :src="noauth" class="noauthimg" />
    </div>
  </div>
</template>
<script>
import CommonBar from "../common/commonBar";
import { mapState } from "vuex";
import BMap from "BMap";
export default {
  components: {
    CommonBar
  },
  data() {
    return {
      noauth: require("../../../static/image/noauth.png"),
      nochekData: require("../../../static/image/nochekData.png"),
      //公共bar
      options: {
        type: "icon",
        centerText: "报警信息",
        iconNname: "wap-home",
        lefttype: "left"
      },
      loading: false,
      finished: false,
      pageSize: 20,
      pageNumber: 1,
      tabCurrentIndex: 0,
      navList: [
        {
          state: 0,
          text: "车辆"
        },
        {
          state: 1,
          text: "人员"
        }
      ],
      //年月日
      signdate: "开始时间",
      showPickerdate: false,
      enddate: "结束时间",
      showPickerenddate: false,
      currentDate: new Date(),
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(),
      //车辆事件
      cartype: 0,
      cartypecolumns: [
        {
          text: "全部事件",
          value: 0
        },
        {
          text: "位置报警",
          value: 1
        },
        {
          text: "上下线报警",
          value: 2
        },
        {
          text: "超速报警",
          value: 3
        },
        {
          text: "偏离路线",
          value: 4
        }
      ],
      //车辆名字
      carname: 0,
      carnamecolumns: [{ text: "全部车辆", value: 0 }],
      //项目公司
      ProjectCompany: 0,
      ProjectCompanycolumns: [{ text: "全部项目公司", value: 0 }],
      //项目部
      Project: 0,
      Projectcolumns: [{ text: "全部项目部", value: 0 }],
      messageList: [],
      departmentId: "",
      departmentType: ""
    };
  },
  computed: {
    ...mapState({
      department_id: state => state.userData.department_id, // 加载 - Main
      department_type: state => state.userData.department_type,
      token: state => state.Authorization,
      role_id: state => state.userData.role_id
    })
  },
  created() {
    this.departmentId = this.department_id;
    this.departmentType = this.department_type;
    this.showDate();

    this.ListCarAlert();
  },
  mounted() {
    if (this.department_type == 1) {
      //集团公司
      this.initSencond();
    } else if (this.department_type == 3) {
      this.ProjectCompany = this.department_id;
      //项目公司
      var params = {
        token: this.token,
        project_company_id: this.department_id
      };
      this.initThird(params);
    } else if (this.department_type == 5) {
      this.Project = this.department_id;
      //项目部
      var params = {
        department_id: this.department_id,
        department_type: this.department_type,
        token: this.token
      };
      this.ListCar(params);
    }
  },
  methods: {
    //上拉加载
    onLoad() {
      this.loading = true;
      this.pageNumber++;

      this.ListCarAlert();
    },
    toHome() {
      this.$router.push({
        //核心语句
        path: "/home" //跳转的路径
      });
    },
    //当前日期
    showDate() {
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.signdate = year + "-" + month + "-" + day;
      this.enddate = year + "-" + month + "-" + day;
    },
    //车辆报警列表
    ListCarAlert() {
      if (this.cartype != 0 && this.carname != 0) {
        //console.log("类型和车牌不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          car_id: this.carname,
          type: this.cartype,
          department_id: this.Project,
          department_type: 5,
          start_date: this.signdate,
          end_date: this.enddate
        };
      } else if (this.cartype != 0 && this.Project != 0) {
        //console.log("类型和项目部不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          department_id: this.Project,
          department_type: 5,
          type: this.cartype,
          start_date: this.signdate,
          end_date: this.enddate
        };
      } else if (this.cartype != 0 && this.ProjectCompany != 0) {
        //console.log("类型和项目公司不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          department_id: this.ProjectCompany,
          department_type: 3,
          type: this.cartype,
          start_date: this.signdate,
          end_date: this.enddate
        };
      } else if (this.cartype != 0) {
        //console.log("类型不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          start_date: this.signdate,
          end_date: this.enddate,
          type: this.cartype
        };
      } else if (this.carname != 0) {
        //console.log("车牌不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          car_id: this.carname,
          department_id: this.Project,
          department_type: 5,
          start_date: this.signdate,
          end_date: this.enddate
        };
      } else if (this.Project != 0) {
        //console.log("项目部不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          start_date: this.signdate,
          end_date: this.enddate,
          department_id: this.Project,
          department_type: 5
        };
      } else if (this.ProjectCompany != 0) {
        //console.log("醒目公司不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          start_date: this.signdate,
          end_date: this.enddate,
          department_id: this.ProjectCompany,
          department_type: 3
        };
      } else if (
        this.ProjectCompany != 0 &&
        this.Project != 0 &&
        this.carname != 0
      ) {
        //console.log("项目不为空");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          car_id: this.carname,
          start_date: this.signdate,
          end_date: this.enddate,
          department_id: this.Project,
          department_type: 5
        };
      } else {
        //console.log("集团");
        var params = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          token: this.token,
          start_date: this.signdate,
          end_date: this.enddate,
          department_id: this.department_id,
          department_type: this.department_type
        };
      }

      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$http
        .get(`${this.$basePath}?service=App.CarAlert.ListCarAlert&api=91`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.messageList = this.messageList.concat(res.data.data);
            //console.log("车辆列表", this.messageList);
            if (this.messageList.length >= res.data.total) {
              this.finished = true;
            }
            this.loading = false;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //选择日期
    //开始日期选中
    onConfirmdate(val) {
      var d = new Date(val);
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      var datetime = year + "-" + month + "-" + day;
      var oDate1 = new Date(this.enddate);
      var oDate2 = new Date(datetime);
      if (oDate1.getTime() < oDate2.getTime()) {
        this.$toast({ message: "开始时间不能大于结束时间,请重新选择" });
        this.showPickerdate = false;
      } else {
        this.signdate = datetime;
        this.showPickerdate = false;
        this.loading = false;
        this.finished = false;
        this.pageNumber = 1;
        this.messageList = [];
        this.ListCarAlert();
      }
    },
    //结束日期选中
    onConfirmenddate(val) {
      var d = new Date(val);
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      var datetime = year + "-" + month + "-" + day;

      this.showPickerenddate = false;
      var oDate1 = new Date(this.signdate);
      var oDate2 = new Date(datetime);
      if (oDate1.getTime() > oDate2.getTime()) {
        this.$toast({ message: "结束时间不能大于开始时间,请重新选择" });
        this.showPickerenddate = false;
      } else {
        this.enddate = datetime;
        this.loading = false;
        this.finished = false;
        this.pageNumber = 1;
        this.messageList = [];
        this.ListCarAlert();
      }
    },
    //选择结束时间
    clickenddate() {
      if (this.signdate != "开始时间") {
        this.showPickerenddate = true;
      } else {
        this.$toast({ message: "请先选择开始时间" });
      }
    },

    //日期格式化
    formatterDate(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    //报警类型选择
    onConfirmCar() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.messageList = [];
      this.ListCarAlert();
    },
    //获取车辆名称
    ListCar(params) {
      this.$http
        .get(`${this.$basePath}?service=App.CarAlert.ListCarByAlert&api=91`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            // //console.log("车辆名称", res);
            for (var car in res.data) {
              var ret = {};
              ret.text = car;
              ret.value = res.data[car];
              this.carnamecolumns.push(ret);
            }
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //车辆名称
    onConfirmCarname() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.messageList = [];
      this.ListCarAlert();
    },
    /*项目部*/

    /**项目公司 */
    initSencond() {
      var params = {
        token: this.token,
        group_department_id: this.department_id
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Organizational.ListProjectCompany&api=84`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            ////console.log("项目公司列表", res);
            var result = res.data.map(o => {
              return {
                text: o.name,
                value: o.id
              };
            });
            result.unshift({ text: "全部项目公司", value: 0 });
            this.ProjectCompanycolumns = result;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    onConfirmProjectCompany() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.messageList = [];
      this.Project = 0;
      this.Projectcolumns = [{ text: "全部项目部", value: 0 }];
      this.Project = 0;
      this.Projectcolumns = [{ text: "全部项目部", value: 0 }];
      this.carname = 0;
      this.carnamecolumns = [{ text: "全部车辆", value: 0 }];
      //加载项目部
      if (this.ProjectCompany != 0) {
        var params = {
          project_company_id: this.ProjectCompany,
          token: this.token
        };
        this.initThird(params);
      }
      this.ListCarAlert();
    },
    /**项目部 */
    initThird(params) {
      this.$http
        .get(
          `${this.$basePath}?service=App.Organizational.ListProject&api=84`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            // //console.log("项目部列表", res);
            var result = res.data.map(o => {
              return {
                text: o.name,
                value: o.id
              };
            });
            result.unshift({ text: "全部项目部", value: 0 });
            this.Projectcolumns = result;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    onConfirmProject() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.messageList = [];
      this.carname = 0;
      this.carnamecolumns = [{ text: "全部车辆", value: 0 }];
      this.departmentType = 5;
      //加载车辆
      if (this.Project != 0) {
        this.departmentId = this.Project;
        var params1 = {
          department_id: this.Project,
          department_type: 5,
          token: this.token
        };
        this.ListCar(params1);
      }
      this.ListCarAlert();
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/warnMessage";
.color1 {
  color: #2ec055 !important;
}
.color2 {
  color: #8a70f7 !important;
}
.color3 {
  color: #ff5065 !important;
}
.color4 {
  color: #01a7eb !important;
}
.noauthimg {
  width: 100%;
  height: calc(100vh - 110px);
}
</style>